<template>
    <div class="bg-white rounded-8px">
      <div class=" p-30px">
        <el-table :data="examList" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="paper_name" label="试卷名称" width="480" >
              <template #default="{ row }">
                    <div class="flex mt-5px">
                      <div class="font-weight-600 text-18px text-red-300">【模拟试卷】</div>
                      <div class="font-weight-600 text-18px text-dark-500">{{ row.paper_name }}</div>
                    </div>
                    <div class="flex mt-5px ml-10px">
                      <div>总题：{{ row.total_topic }}</div>
                      <div>考试时长：{{ row.exam_time }}</div>
                      <div>总分：{{ row.total_score }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="years" label="时间" width="180" />

            <el-table-column prop="status" label="状态" >
              未完成
            </el-table-column>
            <el-table-column label="">
                <template #default="scope">
                    <el-button
                    size="small"
                    type="danger"
                    @click="handleDoExam(scope.row)"
                    >
                    开始做题
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog
      v-model="examDialogVisible"
      title="请选择做题模式"
      width="800px"
      :before-close="handleClose"
    >
    <div class="m-30px text-20px text-dark-500 font-weight-500 text-center">{{ currentExam.paper_name }}</div>
    <el-divider />
    <div class="p-30px">
      <div class="flex justify-center">
        <div class="flex text-20px w-300px">
          <div class="text-red-300 text-24px self-center"><el-icon><Calendar /></el-icon></div>
          <div class="self-center ml-10px">年份：{{ currentExam.years }}</div>
        </div>
        <div class="flex text-20px w-300px">
          <div class="text-red-300 text-24px self-center"><el-icon><Coin /></el-icon></div>
          <div class="self-center ml-10px">总题数：{{ currentExam.total_topic }}道</div>
        </div>
      </div>
      <div class="flex justify-center mt-10px">
        <div class="flex text-20px w-300px">
          <div class="text-red-300 text-24px self-center"><el-icon><Collection /></el-icon></div>
          <div class="self-center ml-10px">总分：{{ currentExam.total_score }}（{{ currentExam.qualified_score }}分合格）</div>
        </div>
        <div class="flex text-20px w-300px">
          <div class="text-red-300 text-24px self-center"><el-icon><Clock /></el-icon></div>
          <div class="self-center ml-10px">考试时间：{{ currentExam.exam_time }}分钟</div>
        </div>
      </div>
    </div>
    <div class="flex justify-center">
      <div class="w-300px mx-10px" @click="goExamDetail(1)"><el-button size="large" class="w-300px" type="warning">练习模式</el-button></div>
      <div class="w-300px mx-10px" @click="goExamDetail(2)"><el-button size="large" class="w-300px" type="primary">考试模式</el-button></div>
    </div>
    <div class="p-30px">
      <div class="flex text-dark-500"><div class="w-4px h-16px bg-red-300 mr-10px ml-5px self-center"></div><div class="self-center">题型介绍</div></div>
      <div class="bg-gray-50 text-gray-500 p-20px rounded-5px">{{ currentExam.introduce }}</div>
    </div>
      
    </el-dialog>
    
  </template>
  
  <script setup>
    import { ref,onMounted,computed,watch, nextTick } from 'vue'
    import { useRoute,useRouter } from 'vue-router'
    import { systemApi,userApi,httpApi } from '../../api/api'
    import { configStore } from '../../stores/config'
    import { Minus } from '@element-plus/icons-vue';
    import DOMPurify from 'dompurify';
    import { ElMessage } from 'element-plus';
  
    const config = configStore();
    //const lessonData = ref({});
    const router = useRouter()
    const examList = ref([])
    const currentExam = ref({})
    const examDialogVisible = ref(false)
  
    const init = async() => {
  
      let res = await httpApi.getSimulatedList()
      if(res.code){
        examList.value = res.data
        //console.log("考试列表",examList.value)
      }
    }
    const handleDoExam = (item)=>{
      console.log("试卷信息",item)
      currentExam.value = item
      examDialogVisible.value = true
    }
    const goExamDetail=(type)=>{
      router.push({
        name:"SimulatedExamDetail",
        query:{type:type, paper_id:currentExam.value.paper_id,paper_name:currentExam.value.paper_name,total_score:currentExam.value.total_score,exam_time:currentExam.value.exam_time}
      })
    }

    // 科目变化时加载
    watch(() => config.$state.currentBook.book_id, () => {
      init()
    })
  
    onMounted(()=>{
      init()
    })
  
  </script>
  <style scoped>
    .linkText{cursor: pointer;}
  </style>